<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'snSplitRule.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
const typeOptions = [
  { label: '分段式', value: 1 },
  { label: '按长度', value: 2 },
]
export default {
  mixins: [commonMixin],
  name: 'snSplitRule',
  data: function () {
    return {
      api: this.$api.snsplitrule,
      apiEdit: this.$api.snsplitrule + 'add',
      name: '外部条码解析规则',
      columns: [
        { title: '代码', key: 'code', width: 120 },
        { title: '名称', key: 'name', width: 200 },
        { title: '类型', key: 'type_name', width: 80 },
        { title: '分隔符', key: 'delimiter', width: 80 },
        { title: '总段数', key: 'tier_num', width: 80 },
        { title: '总长度', key: 'total_length', width: 80 },
        { title: '料号位置', key: 'material', width: 100 },
        { title: '厂商/客户位置', key: 'company', width: 100 },
        { title: '批次号位置', key: 'lot', width: 100 },
        { title: '日期码位置', key: 'datecode', width: 100 },
        { title: '数量位置', key: 'qty', width: 100 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [],
      fieldsC: [
        { title: '代码', key: 'code', required: true },
        { title: '名称', key: 'name', required: true },
        { title: '类型', key: 'type', required: true, name: 'select', options: typeOptions },
      ],
      fields1: [
        { title: '代码', key: 'code', required: true },
        { title: '名称', key: 'name', required: true },
        { title: '类型', key: 'type', required: true, name: 'select', options: typeOptions },
        { title: '分隔符', key: 'delimiter', required: true, span: 12 },
        {
          title: '总段数',
          key: 'tier_num',
          name: 'number',
          span: 12,
          required: true,
          props: { step: 1, min: 1 },
        },
        {
          title: '料号在第几段',
          key: 'material_index',
          name: 'number',
          span: 12,
          required: true,
          props: { step: 1, min: 1 },
        },
        {
          title: '厂商/客户在第几段',
          key: 'company_index',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '批次号在第几段',
          key: 'lot_index',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '日期码在第几段',
          key: 'datecode_index',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '数量在第几段',
          key: 'qty_index',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
      fields2: [
        { title: '代码', key: 'code', required: true },
        { title: '名称', key: 'name', required: true },
        { title: '类型', key: 'type', required: true, name: 'select', options: typeOptions },
        {
          title: '总长度',
          key: 'total_length',
          name: 'number',
          span: 24,
          required: true,
          props: { step: 1, min: 1 },
        },
        {
          title: '料号起始位置',
          key: 'material_index_from',
          name: 'number',
          required: true,
          span: 12,
          props: { step: 1, min: 1 },
        },
        {
          title: '至',
          key: 'material_index_to',
          name: 'number',
          required: true,
          span: 12,
          props: { step: 1, min: 1 },
        },
        {
          title: '厂商/客户起始位置',
          key: 'company_index_from',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '至',
          key: 'company_index_to',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '批次号起始位置',
          key: 'lot_index_from',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '至',
          key: 'lot_index_to',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '日期码起始位置',
          key: 'datecode_index_from',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '至',
          key: 'datecode_index_to',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '数量起始位置',
          key: 'qty_index_from',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        {
          title: '至',
          key: 'qty_index_to',
          name: 'number',
          span: 12,
          props: { step: 1, min: 0 },
        },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
    }
  },
  methods: {
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      return tmp.map((i) => {
        if (i.type == 1) {
          i.material = i.material_index
          i.company = i.company_index || ''
          i.lot = i.lot_index || ''
          i.datecode = i.datecode_index || ''
          i.qty = i.qty_index || ''
        } else if (i.type == 2) {
          i.material = `${i.material_index_from}~${i.material_index_to}`
          i.company = `${i.company_index_from || ''}~${i.company_index_to || ''}`
          i.lot = `${i.lot_index_from || ''}~${i.lot_index_to || ''}`
          i.datecode = `${i.datecode_index_from || ''}~${i.datecode_index_to || ''}`
          i.qty = `${i.qty_index_from || ''}~${i.qty_index_to || ''}`
        }
        i.type_name = typeOptions.find((x) => x.value == i.type)?.label
        return i
      })
    },
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        if (val.type == 1) this.fields = this.fields1
        else if (val.type == 2) this.fields = this.fields2
        else this.fields = this.fieldsC
      },
    },
  },
  created: function () {
    this.fields = this.fieldsC
    this.getList()
  },
}
</script>
<style scoped>
</style>
